import {CollectMoneyOutline, ContentOutline, EnvironmentOutline, AppOutline} from 'antd-mobile-icons'
import {TabBar} from "antd-mobile";
import {CSSProperties} from "react";
import {useLocation, useNavigate} from "react-router-dom";

const Tab = () => {
    // 当前路由信息
    const l = useLocation();
    // 切换路由
    const n = useNavigate();

    // 数据集合
    const tabs = [
        {
            key: "/",
            title: "重磅推荐",
            icon: <AppOutline/>
        },
        {
            key: "/literature",
            title: "文献",
            icon: <ContentOutline/>
        },
        {
            key: "/article",
            title: "文章",
            icon: <CollectMoneyOutline/>
        },
        {
            key: "/region",
            title: "区域",
            icon: <EnvironmentOutline/>
        }
    ];

    // 样式
    const eleStyle: CSSProperties = {
        width: '100%',
        position: "fixed",
        left: 0,
        bottom: 0,
        background: "#fff"
    }

    return (
        <div style={eleStyle}>
            <TabBar activeKey={l.pathname} onChange={(v: string) => n(v)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title}/>
                ))}
            </TabBar>
        </div>
    )
}

export default Tab;